<template>
	<!-- 跳转方式1: -->
	<button @click="goAbout">跳转到关于我们</button>

	<!-- 跳转方式二: -->
	<!-- router-link to="/about" 去除了tag='div'属性 -->
	<router-link to="/about">跳转到关于我们</router-link>
</template>

<script setup>
// <!-- 跳转方式1: -->
let router = useRouter(); //==>等同于this.$router
let route = useRoute(); //==>等同于this.$route
const goAbout = () => {
	router.push('/about');
};

// 导航守卫
// 1全局路由守卫
// 全局前置守卫,路由跳转前触发
// router.beforeEach((to, from, next) => {});
// // 全局解析守卫,在所有组件内守卫和异步路由组件被解析 后触发
// router.beforeResolve((to, from, next) => {});
// // 全局后置守卫,路由跳转未完成后触发
// router.afterEach((to, from) => {});

// // 2路由独享守卫
// // 路由对象单个路由配置,单个路由进入前触发
// beforeEnter: (to, from, next) => {};

// 3组件路由守卫
</script>

<style></style>
